<!--suppress ALL -->
<template>
  <div class="app-container">
    <div id="main" style="width: 100%;height:400px;box-shadow: 0 1px 4px rgb(0 21 41 / 8%);" />
    <div id="sales_count" style="width: 100%;height:400px;margin-top: 35px;box-shadow: 0 1px 4px rgb(0 21 41 / 8%);" />
    <div id="sales_amount" style="width: 100%;height:400px;margin-top: 35px;box-shadow: 0 1px 4px rgb(0 21 41 / 8%);" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { articleCount, salesCount, amountCount } from '@/api/charts'
export default {
  data() {
    return {
      myChart: '',
      salesChart: '',
      amountChart: ''
    }
  },
  mounted() {
    this.articleCount()
    this.salesCount()
    this.amountCount()
    // 当浏览器尺寸变更时，图表尺寸自动适应
    window.onresize = () => {
      this.myChart.resize()
      this.salesChart.resize()
      this.amountChart.resize()
    }
  },
  methods: {
    async articleCount() {
      const res = await articleCount()
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById('main'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '每月文章数量',
          textStyle: {
            color: '#409EFF'
          }
        },
        // 鼠标放上去提示信息
        tooltip: {
          trigger: 'axis'
        },
        // 工具栏
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          data: ['数量']
        },
        // X轴数据
        xAxis: {
          data: res.data.months
        },
        yAxis: {},
        series: [
          {
            name: '数量',
            type: 'bar',
            data: res.data.data
          }
        ]
      }
      this.myChart.setOption(option)
    },
    async salesCount() {
      const res = await salesCount()
      this.salesChart = echarts.init(document.getElementById('sales_count'))
      const option = {
        title: {
          text: '本周订单数',
          textStyle: {
            color: '#409EFF'
          },
          subtext: res.data.week_start + ' ~ ' + res.data.week_end
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['待付款', '已付款', '配货中', '待收货', '交易成功']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {},
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '待付款',
            type: 'line',
            stack: 'Total',
            data: res.data.count.create,
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          },
          {
            name: '已付款',
            type: 'line',
            stack: 'Total',
            data: res.data.count.pay,
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          },
          {
            name: '配货中',
            type: 'line',
            stack: 'Total',
            data: res.data.count.picking,
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          },
          {
            name: '待收货',
            type: 'line',
            stack: 'Total',
            data: res.data.count.shipping,
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          },
          {
            name: '交易成功',
            type: 'line',
            stack: 'Total',
            data: res.data.count.finish,
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          }
        ]
      }
      this.salesChart.setOption(option)
    },
    async amountCount() {
      const res = await amountCount()
      this.amountChart = echarts.init(document.getElementById('sales_amount'))
      const option = {
        title: {
          text: '本周销售额',
          textStyle: {
            color: '#409EFF'
          },
          subtext: res.data.week_start + ' ~ ' + res.data.week_end
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['待付款', '已付款']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {},
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '待付款',
            type: 'line',
            stack: 'Total',
            data: res.data.amount.create,
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          },
          {
            name: '已付款',
            type: 'line',
            stack: 'Total',
            data: res.data.amount.pay,
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          }
        ]
      }
      this.amountChart.setOption(option)
    }
  }
}
</script>
